<template>

  <!--  历史-->
  <div>
    <el-form inline>
      <el-form-item>
        <el-input style="background-color: #f5f7f9;width: 260px;height: 40px;" v-model="Viform"
                  :prefix-icon="Search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" icon="Search" @click="searchData">搜索</el-button>
      </el-form-item>
      <span style="position: relative;left:480px;bottom: 8px;font-size: 15px">  批量删除</span>
    </el-form>
  </div>
  <div style="padding: 0">
    <el-card shadow="hover" style="width: 100%;font-size: 15px" v-for="item in recordList" :key="item.id">
      <el-row>
        <el-col :span="5">
          <a style="cursor: pointer" :href="`https://www.dance365.com/detail/video?momentId=${item.momentId}`">
            <div class="grid-content ep-bg-purple">
              <img class="posi" src="../../../../../src/assets/1.png">
              <el-image :src="item.momentBackup.cover" style="height: 105px;width: 180px"></el-image>
            </div>
          </a>
        </el-col>
        <el-col :span="18">
          <el-col>
            <div class="grid-content ep-bg-purple-light">
              <div style="margin-bottom: 15px">
                <a style="cursor:pointer">{{ item.momentTitle }} </a>
              </div>
              <div style="margin-bottom: 15px">作品</div>
              <div style="margin-bottom: 15px">
                <img :src='item.momentBackup.creatorBackup.avatar'
                     style="border-radius: 50%;height: 30px;vertical-align: middle">
                <a style="cursor:pointer"> {{ item.momentBackup.creatorBackup.name }}</a>
              </div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="1">
          <el-button type="danger" round @click="deleteData(item)">删除</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-backtop :right="40" :bottom="100"/>
  </div>
</template>
<script setup>
import {deleData, getPage, SearchDataList} from "@/api/yym.js"
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Search} from '@element-plus/icons-vue'

const page = ref('3')   //一页显示几个
const total = ref('4')  //总页数
const Viform = ref('')
const recordList = ref([]);
onMounted(() => {
  //挂载后 获取数据 进行响应
  initDataRecordList();
})
//初始化数据的方法
const initDataRecordList = async () => {
  try {
    const res = await getPage()
    console.log(res)
    // ElMessage.success('请求历史记录成功')  // recordList.value = res.content;
    recordList.value = res.content;
    // console.log('page.value',page.value)
    // console.log(' limit.value', limit.value)
    // console.log('  page.value', page.value)
    console.log('content', res.content)
    // console.log('recordList.value', recordList.value[0])
    // console.log('recordList.value', recordList.value[1])
  } catch (e) {
    // ElMessage.error("请求历史记录失败！");
    console.error(e.message)
  }
}
//删除方法
const deleteData = async (item) => {
  ElMessageBox.confirm(
      '确认要删除吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        try {
          const data = {
            name: "batchDeleteSomeViewRecords",
            params: {ids: [item.id]}
          }
          const resData = await deleData(data)
          ElMessage.success('删除节口调取成功')
          console.log(1111111111111111111111111111111)
          await initDataRecordList()
        } catch (e) {
          ElMessage.error('删除节口调取失败')
          console.log(e.message)
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })


}
//搜索
const searchData = async () => {
  const res = await SearchDataList(Viform.value)
  console.log(res)
  recordList.value = res.content
  console.log('recordList.value', recordList.value)
  console.log(Viform.value)
  Viform.value = ''
}
//清空搜索

</script>

<style scoped>
.posi {
  /*width: 10px;*/
  height: 30px;
  width: 30px;
  position: absolute;
  bottom: 15px;
  left: 10px;
  z-index: 999;
}
</style>
